/*
Script: mockup.header.js
	page header used in xdmockup for all pages
	- Developed by Xia Dong, <http://xdmockup.appspot.com>
	- Tested with MooTools release 1.2.4, under Firefox 3, Opera 9, Safari, Chrome and Internet Explorer 6 and 7.
	
License:
	MIT-style license.
	
Changes:
	
	rev.1:
	- 2010-07-26
	- currently just one version.
	
Example:

    var header = new MockupHeader(
        {
            div: 'header',
            active: 2,
            pre: '..'
        }
    );
    
    new MockupHeader({active: 2});
    
HTML:

    <div class="sitename"></div>
    <div class="caption">
        <div class="caption-r">
            <div class="caption-l">
                <div class="menu">
                <ul>
                    <li><span><a class="one active" href="javascript:;"></a></span></li>
                    <li><span><a class="two" href="/case/isaved"></a></span></li>
                    <li><span><a class="three" href="/photo"></a></span></li>
                    <li><span><a class="four" href="/draft"></a></span></li>
                    <li><span><a class="five" href="/about"></a></span></li>
                </ul>
                </div>
            </div>
        </div>
    </div>
	
*/

var HeaderClass = ['one', 'two', 'three', 'four', 'five'];
var HeaderHref = ['/', '/case/isaved', '/photo', '/draft', '/about'];

var MockupHeader = new Class({
    initialize: function(config) {
        this.div = config.div || 'header';
        this.active = config.active || 0;
        this.pre = config.pre || '..';
        this.activeclass = 'active';
        config.active = this.active;
        config.pre = this.pre;
        
        HeaderClass[this.active] = HeaderClass[this.active] + ' ' + this.activeclass;
        
        HeaderHref.each(function(item, index) {
            if (config.active == index)
                HeaderHref[index] = "javascript:;";
            else
                HeaderHref[index] = config.pre + item;
        });
        
        var capr = new Element('div', {'class': 'caption-r'});
        var capl = new Element('div', {'class': 'caption-l'});
        var menu = new Element('div', {'class': 'menu'});
        var ul = new Element('ul');
        $(this.div).setProperty('class', 'caption');
        
        HeaderClass.each(function(item, index) {
            var li = new Element('li');
            var span = new Element('span');
            var link = new Element('a', {'class': item, 'href': HeaderHref[index]});
            
            span.grab(link);
            li.grab(span);
            ul.grab(li);
        });
        
        menu.grab(ul);
        capl.grab(menu);
        capr.grab(capl);
        $(this.div).grab(capr);
        
        var caption = new Element('div', {'class': 'sitename'});
        caption.inject(this.div, 'before');
    }
});